<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>会员分析</h3>
			<h4>贡献分析</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">			
			<div class="biz-member-filter">
				<dl>
					<span>时间维度</span>
					<a href="" data-res="30" class="active">30天</a>
					<a href="" data-res="1" class="">自然月</a>
					<i class="fa fa-question-circle fa-2x"></i>
				</dl>
				<dl>
					<span>时间范围</span>
					<a href="#" data-res="2" class="active">昨天</a>
					<a href="#" data-res="3" class="">最近八天</a>
					<a href="#" data-res="4" class="">最近30天</a>
					<a href="#" data-res="5" class="">2017-08-04至2017-09-11</a>
					<i class="fa fa-question-circle fa-2x"></i>
				</dl>
				<dl>
					<span>订单筛选</span>
					<a href="" data-res="6" class="active">消费频次</a>
					<a href="" data-res="7" class="">消费升数</a>
					<i class="fa fa-question-circle fa-2x"></i>
				</dl>
			</div>
			
			<div class="biz-tubiao">
				<div class="echarts_box" id="main1"></div>
			</div>
			
			<div class="biz-tubiao">
				<div class="echarts_box" id="main2"></div>
			</div>
			
			<table class="layui-table" lay-even>
		       	<thead>
		       		<tr>
		       			<th>······</th>
				        <th>消费人数（人）</th>
				        <th>人数占比</th>
				        <th>人数环比</th>
				        <th>人数增长比率</th>
				        <th>日均消费（升）</th>
				        <th>消费占比</th>
				        <th>日均消费环比（升）</th>
				        <th>消费环比增长率</th>
				        <th>人均消费（升）</th>
		       		</tr>
		       	</thead>
		       	<tbody>
		       		<tr>
		       			<td ></td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
					</tr>
		       		<tr>
		       			<td ></td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
		       		</tr>
		       		<tr>
		       			<td ></td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
				        <td>&nbsp;</td>
		       		</tr>
		       	</tbody>
		    </table>
		</div>
			
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['jquery'],function(){					
					var $=layui.jquery;				
					$('.biz-member-filter a').bind('click',function(){
			    		$(this).addClass('active').siblings().removeClass('active');
			    		/* alert($(this).data('res'));*/
						   $.ajax({
						        url:'',
						        type:'post',
						        success:function (re) {
						            location.href='';
						        }
						    })

			    	return false
			    	})
				})
				
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main1'));      
		        var option = {
		            title: {
		                text: '消费频次人数环比',
		                left: 'center',
		                subtext: ''
		            },
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'shadow'
		                }
		            },
		            legend: {
		                data: ['2011年', '2012年'],
		                bottom:0
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '8%',
		                containLabel: true
		            },
		            yAxis: {
		                type: 'value',
		                boundaryGap: [0, 0.01]
		            },
		            xAxis: {
		                type: 'category',
		                data: ['低频用户','中频用户','中高频用户','高频用户']
		            },
		            series: [
		                {
		                    name: '2011年',
		                    type: 'bar',
		                    barWidth: '15%',
		                    data: [1820, 2348, 2904, 5904]
		                },
		                {
		                    name: '2012年',
		                    type: 'bar',
		                    barWidth: '15%',
		                    data: [1932, 2348, 3100, 5100]
		                }
		            ]
		        };

		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
		 		// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main2'));
		
		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '日均消费环比',
		                left: 'center',
		                subtext: ''
		            },
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'shadow'
		                }
		            },
		            legend: {
		                data: ['2011年', '2012年'],
		                bottom:0
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '8%',
		                containLabel: true
		            },
		            yAxis: {
		                type: 'value',
		                boundaryGap: [0, 0.01]
		            },
		            xAxis: {
		                type: 'category',
		                data: ['低频用户','中频用户','中高频用户','高频用户']
		            },
		            series: [
		                {
		                    name: '2011年',
		                    type: 'bar',
		                    barWidth: '15%',
		                    data: [1820, 2348, 2904, 5904]
		                },
		                {
		                    name: '2012年',
		                    type: 'bar',
		                    barWidth: '15%',
		                    data: [1932, 2348, 3100, 5100]
		                }
		            ]
		        };
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);

		</script>
	</aside>
		<!--/js-->
</body>
</html>
